<template>
  <view>
    <view class="list">
      <view class="list-call">
        <u-icon class="u-icon" size="40" name="account"></u-icon>
        <input class="u-input" type="text" v-model="userInfo.username" maxlength="32"
          placeholder="请输入用户名" />
      </view>
      <view class="list-call">
        <u-icon class="u-icon" size="40" name="lock"></u-icon>
        <input class="u-input" type="text" v-model="userInfo.password" maxlength="32"
          placeholder="请输入密码" :password="!showPassword" />
        <image class="u-icon-right" :src="
          '/static/custom/login/eye_' +
          (showPassword ? 'open' : 'close') +
          '.png'
        " @click="showPass()"></image>
      </view>
	  <view class="list-call">
		  <input class="u-input" type="text" v-model="userInfo.code" maxlength="32"
		    placeholder="请输入验证码" />
		  <image class="yzm-right" :src="codeUrl" @click="getCode"></image>
	</view>
    </view>
   <view class="button" hover-class="button-hover" @click="submit()">
      <text>{{ $t("login.loginButton") }}</text>
    </view>
  </view>
</template>

<script>
import JSEncrypt from '@/utils/jsencrypt.min.js'
export default {
  name: "userPassword",
  data() {
    return {
	codeUrl: '',
    userInfo: {
        username: "admin",
        password: "admin123",
		rememberMe: false,
		code: '',
		uuid: ''
    },
    showPassword: false,
    remember: true,
    baseUrl: "",
    };
  },
  created() {
  	this.getCode();
  },
  methods: {
	  encrypt(txt) {
		 const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n' +
  'nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='
		const encryptor = new JSEncrypt()
		encryptor.setPublicKey(publicKey) // 设置公钥
		return encryptor.encrypt(txt) // 对数据进行加密
	  },
	  // 获取验证码
	async getCode(){
		const res = await this.$u.api.getCodeImg()
		const captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
		if(res.code === 200 && captchaOnOff) {
			this.codeUrl = "data:image/gif;base64," + res.img;
			this.userInfo.uuid = res.uuid
		}
	},
    showPass() {
      this.showPassword = !this.showPassword
    },
	
    //登录
  async submit() {
		
      // 表单校验
      const { username, password, code } = this.userInfo
      if (username.length === 0) return this.$u.toast("请输入账号")
      if (password.length === 0) return this.$u.toast("请输入密码")
	  if (code.length === 0) return this.$u.toast("请输入密码")
        // 登录接口
        const tokenRes = await this.$u.api.login(this.userInfo)
		if(tokenRes.code === 200){
			this.$u.toast("恭喜您，登录成功！");
			// 登陆成功，存储相关信息
			uni.setStorageSync("Admin-Token", tokenRes.data.access_token);
			// 查询用户详细信息并储存
			const resUser = await this.$u.api.user.getUserInfo();
			this.$u.vuex("vuexUser", resUser.user);
			uni.setStorageSync("userInfo", JSON.stringify(resUser.user));
			uni.setStorageSync("permissions", resUser.permissions);
			// 跳转页面
			uni.switchTab({
			  url: "/pages/sys/home/index",
			});
		}
    },
	

  },
};
</script>

<style lang="scss">
@import "index.scss";
</style>
